<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        body {
            /* 加载背景图 */
            background-image: url(imgs/main.png);
            /* 背景图垂直、水平均居中 */
            background-position: center center;
            /* 背景图不平铺 */
            background-repeat: no-repeat;
            /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
            background-attachment: fixed;
            /* 让背景图基于容器大小伸缩 */
            background-size: cover;
            /* 设置背景颜色，背景图加载过程中会显示背景色 */
            background-color: #464646;
        }
        header a{
            text-decoration: none;
            color: #666;
        }
        .el-table .el-table__cell{
            padding: 0; /*设置表格行之间的距离为0*/
        }
        .icon{
           margin: 10px;
        }
        #i2{
            transition-duration: 0.1s;
        }
        #i2:hover{
            transform: scale(1.05);
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header height="150px">
            <div style="background-color: #fff">
                <el-menu text-color="#df9b49" background-color="#fff"
                         mode="horizontal"
                         style="width: 1200px;margin: 0 auto"
                         active-text-color= red>
                    <el-menu-item index="1"><img src="imgs/login.png" style="width: 150px" alt=""></el-menu-item>
                    <el-menu-item index="2"><a href="index.html">首页</a></el-menu-item>
                    <el-menu-item index="3">社区精选</el-menu-item>
                    <el-menu-item index="4">发现好友</el-menu-item>
                    <el-menu-item index="5">体验券</el-menu-item>
                    <el-menu-item index="6"><a href="pay.html">充值</a></el-menu-item>
                    <el-menu-item index="7">商用合作</el-menu-item>
                    <el-menu-item disabled="false"></el-menu-item>
                        <div class="icon">
                            <a href=""><el-avatar icon="el-icon-user-solid"></el-avatar></a>
                        </div>
                </el-menu>
            </div>

        </el-header>
        <el-main style="width: 1500px;margin: 0 auto;">
            <el-row gutter="20">
                <el-col span="18">
                    <!--走马灯开始-->
                    <el-carousel height="300px">
                        <el-carousel-item>
                            <img src="imgs/2.png" width="100%" height="100%" alt="">
                        </el-carousel-item>
                        <el-carousel-item>
                            <img src="imgs/2.1.png" width="100%" height="100%" alt="">
                        </el-carousel-item>
                        <el-carousel-item>
                            <img src="imgs/2.2.png" width="100%" height="100%" alt="">
                        </el-carousel-item>
                    </el-carousel>
                    <!--走马灯结束-->
                </el-col>
                <el-col span="6">
                    <!--排行榜开始-->
                    <el-card>
                        <h3>
                            <i class="el-icon-trophy">点赞量最高</i>
                        </h3>
                        <el-divider></el-divider>
                        <el-table :data="topArr">
                            <el-table-column type="index" label="排名"></el-table-column>
                            <el-table-column prop="title" label="博客昵称"></el-table-column>
                            <el-table-column prop="likes" label="点赞量"></el-table-column>
                        </el-table>
                    </el-card>
                    <!--排行榜结束-->
                </el-col>
            </el-row>
            <!--作品列表开始-->
            <el-row gutter="20">
                <el-col id="i2" style="margin: 10px 20px" span="4" v-for="p in productArr">
                    <el-card style="width: 250px;height: 450px">
                        <img :src="p.url" width="100%" alt="">
                        <div>
                            <p style="font-size: 15px">{{p.title}}</p>
                            <img :src="p.img" style="border-radius: 100px" alt="" width="50px">
                            <span style="position: relative;bottom: 15px">{{p.nickname}}
                                <span style="float: right" icon="reds-icon like-icon">点赞{{p.like}}</span>
                            </span>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
            <!--作品列表结束-->
        </el-main>
        <el-pagination
                background
                layout="prev, pager, next"
                :total="100"style="margin: 0 auto">
        </el-pagination>
        <el-footer>
            <div style="background-color:rgba(255 255 255 0.3);color: #b1b1b1;
            text-align: center;padding: 30px 0">
                <p>沪ICP备 5616511号 Copyright © 2014-2022 C-Fans信息科技（上海）有限公司 | 地址：************ | 电话：********* | 营业执照 | 自营经营者信息 | 2022 沪公网安备 658****00533号</p>
                    <p>网络文化经营许可证：沪网文［2021］1545-113号 | 增值电信业务经营许可证：沪********</p>
                    <p>医疗器械经营许可证：沪嘉食药监械经营许20187006号 | 医疗器械网络交易服务第三方平台备案:（沪）网械平台备字[2019]第00006号 | 互联网药品信息服务资格证书：(沪)-经营性-2018-0011 违法不良信息举报电话：(027) 8700 3878 | 上海市互联网举报中心 | 网上有害信息举报专区</p>
            </div>
        </el-footer>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                user:{
                   search:""
                },
                topArr:[{title:"毛毛虫baby",likes:2342},
                    {title:"毛毛虫baby",likes:2342},
                    {title:"毛毛虫baby",likes:2342},
                    {title:"毛毛虫baby",likes:2342},
                    {title:"毛毛虫baby",likes:2342},
                    {title:"毛毛虫baby",likes:2342}],
                productArr:[{title:"怀孕也要一直美美的～",img:"imgs/1.1.png",nickname:"毛毛虫baby",url:"imgs/1.png",like:2342},
                    {title:"怀孕也要一直美美的～",img:"imgs/1.1.png",nickname:"毛毛虫baby",url:"imgs/1.png",like:2342},
                    {title:"怀孕也要一直美美的～",img:"imgs/1.1.png",nickname:"毛毛虫baby",url:"imgs/1.png",like:2342},
                    {title:"怀孕也要一直美美的～",img:"imgs/1.1.png",nickname:"毛毛虫baby",url:"imgs/1.png",like:2342},
                    {title:"怀孕也要一直美美的～",img:"imgs/1.1.png",nickname:"毛毛虫baby",url:"imgs/1.png",like:2342},
                    {title:"怀孕也要一直美美的～",img:"imgs/1.1.png",nickname:"毛毛虫baby",url:"imgs/1.png",like:2342},
                    {title:"怀孕也要一直美美的～",img:"imgs/1.1.png",nickname:"毛毛虫baby",url:"imgs/1.png",like:2342},
                    {title:"怀孕也要一直美美的～",img:"imgs/1.1.png",nickname:"毛毛虫baby",url:"imgs/1.png",like:2342},
                    {title:"怀孕也要一直美美的～",img:"imgs/1.1.png",nickname:"毛毛虫baby",url:"imgs/1.png",like:2342},
                    {title:"怀孕也要一直美美的～",img:"imgs/1.1.png",nickname:"毛毛虫baby",url:"imgs/1.png",like:2342},
                    {title:"怀孕也要一直美美的～",img:"imgs/1.1.png",nickname:"毛毛虫baby",url:"imgs/1.png",like:2342},
                ]
            }
        },
        methods: {

        }
    })
</script>
</html>